import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { withKnobs } from "@storybook/addon-knobs";
import { ViewPort, Left, Top, Right, Bottom, LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../../";
import { red, green, blue, description } from "../Utils";
import { CommonHeader } from "../Utils";

<CommonHeader />

<Meta title="Basic examples/Anchored" />

## Anchored spaces

Examples of anchored spaces.

### Non-resizable

<Canvas>
	<Story name="Non-resizable">
		<React.StrictMode>
			<ViewPort>
				<Left size="20%" style={blue} trackSize={true}>
					{description("Left")}
				</Left>
				<Fill style={green} trackSize={true}>
					<Top size="20%" style={red} trackSize={true}>
						{description("Top")}
					</Top>
					<Fill style={green} trackSize={true}>{description("Fill")}</Fill>
					<Bottom size="20%" style={red} trackSize={true}>
						{description("Bottom")}
					</Bottom>
				</Fill>
				<Right size="20%" style={blue} trackSize={true}>
					{description("Right")}
				</Right>
			</ViewPort>
		</React.StrictMode>
	</Story>
</Canvas>

### Resizable

<Canvas>
	<Story name="Resizable">
		<React.StrictMode>
			<ViewPort>
				<LeftResizable size="20%" style={blue} trackSize={true}>
					{description("Left")}
				</LeftResizable>
				<Fill style={green}>
					<TopResizable size="20%" style={red} trackSize={true}>
						{description("Top")}
					</TopResizable>
					<Fill style={green} trackSize={true}>
						{description("Fill")}
					</Fill>
					<BottomResizable size="20%" style={red} trackSize={true}>
						{description("Bottom")}
					</BottomResizable>
				</Fill>
				<RightResizable size="20%" style={blue} trackSize={true}>
					{description("Right")}
				</RightResizable>
			</ViewPort>
		</React.StrictMode>
	</Story>
</Canvas>
